<template>
  <div class="app-container">
    <h1>Component Libs 组件库</h1>
    <nav class="nav">
      <router-link to="/">Icon</router-link>
      <router-link to="/button">Button</router-link>
      <router-link to="/card">Card</router-link>
      <router-link to="/dialog">Dialog</router-link>
      <router-link to="/pager">Pager</router-link>
      <router-link to="/collapse">Collapse</router-link>
      <router-link to="/tooltip">Tooltip</router-link>
      <router-link to="/dropdown">Dropdown</router-link>
    </nav>
    <div class="displayArea">
      <router-view></router-view>
    </div>
  </div>
</template>
<script setup></script>

<style lang="scss" scoped>
.app-container {
  padding: 20px 0;
  h1 {
    font-weight: 100;
    text-align: center;
  }
  .nav {
    padding: 20px 0;
    margin: 0 auto;
    width: 70%;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
  .displayArea {
    padding: 15px;
    margin: 0 auto;
    width: 80%;
  }
}
.active {
  &::after {
    content: '';
    display: block;
    width: 100%;
    height: 3px;
    margin-top: 4px;
    border-radius: var(--ct-border-radius-small);
    background-color: var(--ct-color-success);
    box-shadow: 0 10px 20px var(--ct-color-success);
  }
}
</style>
